<template>
  <view>
    <fu-custom bgColor="bg-white" :isBack="true" :isBottom="true">
      <block slot="content">{{i18n['我的优惠券']}}</block>
    </fu-custom>
    <!-- 标签栏 start -->
    <fu-tab :tabs="navs" :sticky="true" :scrollspy="true" line-height="6"  line-color="linear-gradient(270deg, #FFFFFF 0%, #F04E58 100%)" @change="tabSelect"></fu-tab>
    <!-- 标签栏 end -->
    <!-- 优惠券列表 start-->
    <view v-for="(item, index) in listData" :key="index" id="list">
      <view class="coup">
        <view class="items">
          <view class="flex justify-center align-center " :class="[item.status == 1 ? 'addressTrue' : 'addsFrom']">
            <view class="flex flex-direction text-center item-overflow">
              <text class="text-cut color-white money-size">
                <text class="text-price" style="font-size: 24rpx;"></text>
                <text>{{ item.money | filterPrice }}</text>
              </text>
              <text class="font-24 text-cut color-white">{{i18n['满']}}{{ item.min_order_money | filterPrice }}{{i18n['可减']}}</text>
            </view>
          </view>
          <view class="flex margin-left-sm align-center width45 height200">
            <view class="flex flex-direction text-sm line-height">
              <text class="font-28 text-bold">{{ item.coupon_name }}</text>
              <text class="font-24 text-999 text-cut margin-top-sm" >{{item.content}}</text>
              <text class="text-xs text-666 text-cut margin-top-sm" >{{i18n['有效期至：']}}{{ item.end_time }}</text>
            </view>
          </view>
          <view class="use-btn" @tap="handleClick(item)" :class="[item.status == 1 ? 'ctr' : '']">
            <!-- {{ item.status == 1 ? i18n['未使用'] : item.status == 3 ? i18n['未使用'] : i18n['已过期'] }} -->
            <text v-if="item.status == 1">{{i18n['未使用']}}</text>
              <text v-if="item.status == 3">{{i18n['已使用']}}</text>
              <text v-if="item.status == 4">{{i18n['已过期']}}</text>
          </view>
        </view>
        <view v-if="item.share" class="padding-left">
          <text class="text-xs margin-left-xs">{{ item.content || '' }}</text>
        </view>
      </view>
    </view>
    <!-- 优惠券列表 end -->
    <!-- 分页组件 start -->
    <fu-empty :paging-list-loaded-all="pagingListLoadedAll" :paging-list-no-list-data="pagingListNoListData"
      :list-data-length="listDataLength" :isLoadInit='isLoadInit'></fu-empty>
    <!-- 分页组件 end -->
    <!-- 断网检测 start -->
    <fu-notwork></fu-notwork>
    <!-- 断网检测 end -->
  </view>
</template>

<script>
// 引入混入js
import pagingList from '@/common/mixin/paging_list.js';
export default {
  mixins: [pagingList], //混入
  data() {
    return {
      navs: [
        { status: 1, name: global.i18n['全部'] },
        { status: 2, name: global.i18n['未使用'] },
        // { status: 3, name: global.i18n['已使用'] },
        { status: 4, name: global.i18n['已过期'] },
      ], //标签栏数据
      TabCur: 1, //选中标签栏状态值  默认1 全部
      minixPagingListsApi: global.apiUrls.get_user_coupn, //混入数据接口名
      pageingListApiMethod: 'get', //混入获取数据方式
			allowOnloadGetList: false, // 是否允许页面onload生命周期进入后立马执行getlist
    };
  },
  filters: {
    filterPrice(val){
      return parseFloat(val);

    }
  },
  onLoad() {
    this.setNavigationBarTitle(this.i18n['优惠券']);
		
  },
	onShow() {
		this.pagingListToggle();
	},
  methods: {
    /**
     * @description 混入钩子函数
     * @param {Object} val入参  混入接口响应返回值
     */
    pagingListBeforeResponseData(val) {
      var list = { list: val.data.data };
      return list;
    },
    /**
     * @description 标签栏选择事件
     * @param {Object} status 入参 status 1 全部 2 未使用 3 已使用 4 已失效
     */
    tabSelect(e) {
      // pagingListAllowLoadMore fasle 不允许加载数据
      if (!this.pagingListAllowLoadMore) return false;
      this.TabCur = this.navs[e.index].status;
      // 混入获取数据
      this.pagingListToggle();
    },
    /**
     * @description 混入钩子函数 进行数据传参
     */
    pagingListPostData() {
      let { navs, TabCur } = this;
      return {
        type: this.TabCur //获取哪种状态数据
      };
    },
    /**
     * @description 使用优惠券
     * @param {Object} item 事件源入参 item.status == 1属于未使用的优惠券 才能跳转使用
     */
    handleClick(item) {
      if (item.status != 1) return;
	  if(item.is_url == 1){
		  this.$urouter.navigateTo({
			  url: '/pages/goods/goodsdetail/goods-detail/index',
			  params: {
				  goods_id: item.goods_id,
				  sku_id: item.sku_id,
			  }
		  });
	  }else{
		  this.$urouter.navigateTo('/pages/goods/goodslist/goods-search/index');
	  }
    }
  }
};
</script>

<style lang="scss" scoped>
// 标题栏 start
.nav {
  margin-bottom: 20upx;
}
.nav .cu-item{
  position: relative;
  .active-line{
    position: absolute;
    bottom: 12rpx;
    left: 50%;
    transform: translateX(-50%);
    display: none;
    width: 40rpx;
    height: 6rpx;
    background: $bgtheme;
    opacity: 1;
    border-radius: 6rpx;
  }
}
.nav .cu-item.cur {
  color: $theme;
  font-weight: bold;
  border-bottom: 0!important;
  .active-line{
    display: block;
  }
}

.nav .cu-item.cur::after {
  content: '';
  display: none;
}
// 标题栏 end
// 优惠券  start
.coup {
  width: 700rpx;
  /* height: 250rpx; */
  background: #fff;
  margin: 30rpx auto 0;
  border-radius: 20rpx;
  position: relative;
  font-size: 28rpx;
  overflow: hidden;
  .items {
    width: 700rpx;
    height: 200rpx;
    display: flex;
    position: relative;
    .use-btn{
      position: absolute;
      right: 0;
      width: 52rpx;
      height: 100%;
	  font-size: 28rpx;
	  letter-spacing: 10  rpx;
      // writing-mode:vertical-rl;
      writing-mode: tb-rl;
      text-align: center;
      background: #BFBFBF;
      color: #FFFFFF;
      // padding-top: 40rpx;
	  display: flex;
	  align-items: center;
	  justify-content: center;
    }
    &::before {
      content: '';
      display: inline-block;
      padding: 0 !important;
      font-size: 0 !important;
      width: 28rpx;
      height: 28rpx;
      box-sizing: border-box;
      border-radius: 50%;
      border-left: 14.2rpx solid #ffffff;
      border-top: 14.2rpx solid #ffffff;
      border-bottom: 14.2rpx solid transparent;
      border-right: 14.2rpx solid transparent;
      transform: rotate(48deg);
      position: absolute;
      right: 176.2rpx;
      bottom: -15rpx;
    }
    &::after {
      content: '';
      display: inline-block;
      padding: 0 !important;
      font-size: 0 !important;
      width: 28rpx;
      height: 28rpx;
      box-sizing: border-box;
      border-radius: 50%;
      border-left: 14.2rpx solid #ffffff;
      border-top: 14.2rpx solid #ffffff;
      border-bottom: 14.2rpx solid transparent;
      border-right: 14.2rpx solid transparent;
      transform: rotate(228deg);
      position: absolute;
      right: 176.2rpx;
      top: 0rpx;
    }
    .addressTrue {
      min-width: 200rpx;
      max-width: 200rpx;
      height: 100%;
      background: $bgtheme;
      border-radius: 16rpx 0 0 16rpx;
      padding: 0 10rpx;
      box-sizing: content-box;
    }
    .addsFrom {
      min-width: 200rpx;
      max-width: 200rpx;
      height: 100%;
      background: #BFBFBF;
      border-radius: 16rpx 0 0 16rpx;
      padding: 0 10rpx;
      box-sizing: content-box;
    }
    .item-overflow {
      overflow: hidden;
      .color-white {
        color: #ffffff;
      }
    }
    .width45 {
      width: 45%;
    }
    .width25 {
      width: 25%;
    }
    .height200 {
      height: 200rpx;
    }
    .line-height{
      line-height: 40rpx;
    }
    .ctr {
      background: $bgtheme;
      color: $fu-type-error-light;
    }
    .money-size {
      font-size: 56rpx;
    }

    .font-24 {
      font-size: 24rpx;
    }
    .font-34 {
      font-size: 34rpx;
    }

  }
}
// 优惠券 end
</style>
